<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 内部样式 -->
  <style>
    div{
      position: relative;      
      width: 200px;
      height: 200px;      
    }
    #d1{
      background-color: greenyellow;
      left: 0px;
      top: 100px;
      /* 如果不写的话,默认是0,整数,负数,必须是整数
      没有单位,font-weight,z-index,页面到屏幕的距离
      z-index 越大,距离屏幕越近,越能覆盖其他的元素,
      z-inde 值一样的话.后来居上
       */
      z-index: 3;
    }
    #d2{
      background-color: hotpink;
      z-index: 2;
    }
    #d3{
      background-color: khaki;
      z-index: 0;
    }
    /* z-index只能用于相对定位,绝对定位,固定,
    (标准流,浮动,静态定位是无效的) */
  </style>
</head>
<body>
  <!-- 定位的覆盖,定位布局的时候,层叠 -->
  <!-- 层叠/覆盖,下边的会覆盖住上的 -->
  <div id="d1">我是div1</div>
  <div id="d2">我是div2</div>
  <div id="d3">我是div3</div>  
</body>
</html>